<template>
    <van-nav-bar title="基本资料" left-text="" left-arrow @click-left="goBack" />
    <div class="user">
        <div class="user-image">
            <img :src="LoginUser.avatar" alt="">
        </div>
    </div>
    <div class="box">
        <li>标题一</li>
    </div>
    <div class="form" style="overflow: hidden;">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="LoginUser.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]" />
                <van-field v-model="LoginUser.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码" readonly />
                <van-field v-model="LoginUser.email" name="email" label="邮箱" placeholder="请输入邮箱" />
                <van-field v-model="LoginUser.password" type="password" name="password" label="密码"
                    placeholder="请输入密码" />
                <van-field name="gender" label="性别">
                    <template #input>
                        <van-radio-group v-model="LoginUser.gender" direction="horizontal">
                            <van-radio name="0">保密</van-radio>
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <!-- 地区 -->
                <van-field v-model="LoginUser.region" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
                    @click="showArea = true" />
                <van-popup v-model:show="showArea" position="bottom">
                    <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
                </van-popup>

                <!-- 头像 -->
                <van-field name="avatar" label="头像">
                    <template #input>
                        <van-uploader v-model="avatar" :max-count="1" />
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="success" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script setup>
import { areaList } from '@vant/area-data';
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser'));
const showArea = ref(false);
const avatar = ref([
    {
        url: LoginUser.avatar
    }
])
const onConfirm = ({ selectedOptions }) => {
    showArea.value = false;
    LoginUser.region = selectedOptions.map((item) => item.text).join('-');
    let [province, city, district] = selectedOptions
    if (province) {
        LoginUser.province = province.value
    }
    if (city) {
        LoginUser.city = city.value
    }
    if (district) {
        LoginUser.district = district.value
    }
};
const goBack = () => {
    proxy.$router.push('/business/index')
}
const onSubmit = async (values) => {
    let data = {
        id: LoginUser.id,
        nickname: values.nickname,
        email: values.email,
        gender: values.gender,
        province: LoginUser.province,
        city: LoginUser.city,
        district: LoginUser.district
    }

    // 判断是否修改密码
    if (values.password) {
        data.password = values.password
    }

    // 判断是否修改头像
    if (values.avatar.length > 0 && values.avatar[0].file) {
        data.avatar = values.avatar[0].file
    }
    let result = await Api.profile(data)
    if (result.code == 1) {
        success({
            message: result.msg,
            onClose: () => {
                goBack()
            }
        });
    } else {
        error(result.msg);
    }
};
</script>
<style>
@import url('/assets/css/profile.css');
</style>